<!-- 报表 -->
<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 2、为echarts准备一个具备大小(宽高的) DOM -->
      <div id="main" style="width: 50%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
// 1、导入echarts
import echarts from 'echarts'
export default {
  data() {
    return {}
  },

  created() {},

  mounted() {
    // 3、基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

    // 4、准备数据配置
    var option = {
      backgroundColor: '#38445E',
      grid: {
        left: '12%',
        top: '5%',
        bottom: '12%',
        right: '8%'
      },
      xAxis: {
        data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行'],
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 129, 109, 0.1)',
            width: 1 
          }
        },
        axisLabel: {
          textStyle: {
            color: '#999',
            fontSize: 12
          }
        }
      },
      yAxis: [
        {
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 1 
            }
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          },
          splitArea: {
            areaStyle: {
              color: 'rgba(255,255,255,.5)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 129, 109, 0.1)',
              width: 0.5,
              type: 'dashed'
            }
          }
        }
      ],
      series: [
        {
          name: 'hill',
          type: 'pictorialBar',
          barCategoryGap: '0%',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          label: {
            show: true,
            position: 'top',
            distance: 15,
            color: '#DB5E6A',
            fontWeight: 'bolder',
            fontSize: 20
          },
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(232, 94, 106, .8)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(232, 94, 106, .1)'
                  }
                ],
                global: false
              }
            },
            emphasis: {
              opacity: 1
            }
          },
          data: [123, 60, 25, 18, 12, 9, 2, 1],
          z: 10
        }
      ]
    }

    // 5、展示数据
    myChart.setOption(option)
  },

  methods: {}
}
</script>
<style lang='less' scoped>
</style>